<template>
  <div>
    <el-card class="!border-none" shadow="never">
      <el-page-header
        :content="route.query.id ? '编辑商品' : '新增商品'"
        @back="$router.back()"
      />
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <el-form
        :inline="true"
        :model="formData"
        label-width="150px"
        class="w-[100%]"
        :rules="goodRule"
        ref="formRef"
      >
        <el-form-item label="所属分类" prop="second_cat_id">
          <el-tree-select
              :props="{ children: 'child_cats', label: 'name', value: 'id' }"
              class="flex-1"
              v-model="formData.second_cat_id"
              :data="classifyList.lists.list"
              clearable
              :default-expand-all="true"
              placeholder="请选择分类"
          />
        </el-form-item>
        <div>
          <el-form-item label="商品名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入等级名称" />
          </el-form-item>
        </div>

       <div>
         <el-form-item label="商品封面" prop="cover">
           <div>
               <el-image v-if="formData.cover" style="width: 100px; height: 100px" :src="formData.cover" />
<!--             <material-picker :limit="9" v-model="formData.slider" />-->
               <upload
                       v-if="!formData.cover || route.query.id"
                       class="mr-3"
                       :type="'image'"
                       :show-progress="true"
                       @change="actionImg('cover')"
                       ref="coverRef"
               >
                   <el-button type="primary">本地上传</el-button>
               </upload>
           </div>
         </el-form-item>
       </div>
       <div>
         <el-form-item label="商品轮播图" prop="slider">
           <div>
               <template v-for="item in formData.slider" v-if="formData.slider.length < 9">
                   <el-image style="width: 100px; height: 100px; margin-right: 4px" :src="item" />
               </template>
<!--             <material-picker :limit="9" v-model="formData.slider" />-->
               <upload
                   class="mr-3"
                   :type="'image'"
                   :show-progress="true"
                   @change="actionImg('slider')"
                   ref="imgRef"
               >
                   <el-button type="primary">本地上传</el-button>
               </upload>
             <div class="form-tips">
               建议尺寸：800*800,可拖拽改变图片顺序，默认首张图为主图，最多可上传9张
             </div>
           </div>
         </el-form-item>
       </div>
        <div>
          <el-form-item label="商品市场价" prop="price_market">
            <el-input-number v-model="formData.price_market" :min="0" :precision="2" :step="0.1" controls-position="right"/>
          </el-form-item>
          <el-form-item label="商品售价" prop="price_selling">
            <el-input-number v-model="formData.price_selling" :min="0" :precision="2" :step="0.1" controls-position="right"/>
          </el-form-item>

            <el-form-item label="商品库存" prop="stock_total" label-width="150px">
                <el-input-number v-model="formData.stock_total" :min="0" :step="1" controls-position="right"/>
            </el-form-item>
        </div>
          <div>
              <el-form-item label="商品限购数量" prop="limit_max_num">
                  <el-input-number v-model="formData.limit_max_num" :min="0" :precision="2" :step="0.1" controls-position="right"/>
              </el-form-item>
              <el-form-item label="虚拟销量" prop="stock_virtual">
                  <el-input-number v-model="formData.stock_virtual" :min="0" :precision="2" :step="0.1" controls-position="right"/>
              </el-form-item>
          </div>
        <div>
          <el-form-item label="是否分佣">
              <el-radio-group v-model="formData.is_commission">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
              </el-radio-group>
          </el-form-item>
            <template v-if="formData.is_commission == 1">
                <el-form-item label="成本价(供货商价格)" prop="vip_reward_balance2" label-width="150px">
                    <el-input-number v-model="formData.vip_reward_balance2" :min="0" :precision="2" :step="0.1" controls-position="right"/>
                </el-form-item>
                <el-form-item label="代理收益 / %" prop="vip_reward_balance2_balance3">
                    <el-input-number v-model="formData.vip_reward_balance2_balance3" :min="0" :step="1" controls-position="right"/>
                </el-form-item>
                <el-form-item label="团长收益 / %" prop="vip_reward_balance2_inv_rate">
                    <el-input-number v-model="formData.vip_reward_balance2_inv_rate" :min="0" :step="1" controls-position="right"/>
                </el-form-item>
            </template>
        </div>
        <div>
          <el-form-item label="是否首页推荐">
            <el-radio-group v-model="formData.is_recommend">
              <el-radio :label="1">推荐</el-radio>
              <el-radio :label="2">不推荐</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="发货类型">
              <el-radio-group v-model="formData.send_type">
                  <el-radio :label="1">自动发货</el-radio>
                  <el-radio :label="2">正常发货</el-radio>
              </el-radio-group>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="是否多规格">
              <el-radio-group v-model="formData.spec_type">
                  <el-radio :label="1">单规格</el-radio>
                  <el-radio :label="2">多规格</el-radio>
              </el-radio-group>
          </el-form-item>
        </div>
		<div>
            <el-form-item label="是否赠送优惠券">
              <el-radio-group v-model="formData.is_coupon" @change="handleClick">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <template v-if="formData.is_coupon==1">
                <el-form-item label="赠送优惠券数量" prop="gift_coupon_count">
                    <el-input-number v-model="formData.gift_coupon_count" :min="0" :step="1" controls-position="right"/>
                </el-form-item>
                <el-form-item label="赠送优惠券" prop="gift_coupon">
                    <el-select v-model="formData.gift_coupon">
                        <template v-for="(item, index) in couponList.lists.list">
                            <el-option :label="item.name" :value="item.id" />
                        </template>
                    </el-select>
                </el-form-item>
            </template>
		</div>
          <div>
              <el-form-item label="优惠券最高使用金额" prop="gift_coupon_count">
                  <el-input-number v-model="formData.coupon_price_max" :precision="2" :step="0.1" :min="0" controls-position="right"/>
              </el-form-item>
          </div>
        <div>
          <el-form-item label="叠加优惠券">
              <el-radio-group v-model="formData.overlay_coupon"  @input="handleClick">
                  <el-radio :label="1">否（只能使用单张优惠卷）</el-radio>
                  <el-radio :label="2">是（可以使用多张优惠卷）</el-radio>
              </el-radio-group>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="可见范围">
              <el-radio-group v-model="formData.daili_viewable_radio">
                  <el-radio :label="1">全部可见</el-radio>
                  <el-radio :label="2">固定代理可见</el-radio>
                  <el-radio :label="3">固定代理不可见</el-radio>
              </el-radio-group>
          </el-form-item>
            <el-form-item v-if="formData.daili_viewable_radio == 2" label="哪些代理可见" prop="viewable">
                <el-input v-model="formData.viewable" placeholder="请输入哪些代理可见">
                    <template #append>以英文,分隔开</template>
                </el-input>
            </el-form-item>
            <el-form-item v-if="formData.daili_viewable_radio == 3" label="哪些代理不可见" prop="unviewable">
                <el-input v-model="formData.unviewable" placeholder="请输入哪些代理不可见">
                    <template #append>以英文,分隔开</template>
                </el-input>
            </el-form-item>
        </div>
        <div v-if="formData.spec_type == 2">
            <el-form-item label="商品规格及商品SKU绑定123" prop="data_specs" class="w-[100%]">
                <div></div>
                <el-alert
                        type="warning"
                        title="（规格填写后不允许再次修改）（类型为多规格的情况下，商品价格将以规格内价格为主，上方价格及库存销量将无效）"
                        :closable="false"
                        show-icon
                />
                <div v-if="!route.query.id" class="w-[100%] flex gap-2 flex-row" style="border: 1px #67C23A dashed; padding: 10px; overflow-x: auto">
                    <div>
                        <el-button type="primary" @click="addTableList" :disabled="groupList.length === 3">添加分组</el-button>
                    </div>
                    <div class="flex-1 flex flex-row">
                        <div class="w-[33%]" v-for="(item, index) in groupList" :key="index" style="padding: 0 10px; min-width: 300px; overflow-x: auto">
                            <div class="flex flex-row justify-center items-center">
                                <el-card shadow="always" style="width: 100%">
                                    <template #header>
                                        <div class="card-header">
                                            <el-input v-model="item.name" @input="changeTableTitle(index, item.name)"></el-input>
                                            <div class="mt-4 flex flex-row flex-wrap justify-around">
<!--                                                <el-button type="primary" v-if="index !== 0" @click="LeftMove(index, item)">左移</el-button>-->
<!--                                                <el-button type="primary" v-if="index !== 2 && groupList.length !== 1" @click="LeftMove(index, item)">右移</el-button>-->
                                                <el-button type="success" @click="addTableItemList(index, item.name)">添加</el-button>
                                                <el-button v-if="groupList.length !== 1" type="danger" @click="delTableList(index)">删除</el-button>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="w-[100%] flex flex-row flex-wrap gap-2">
                                        <div class="w-[48%] tableList-check-div" v-for="(_item, _index) in item.list" :key="index+_index" :style="_item.check ? 'background-color: #00e2fa;' : null">
                                            <div class="flex items-center justify-center gap-2">
                                                <el-icon v-if="_item.check" @click="selectTable(_item, _index)"><Check /></el-icon>
                                                <el-icon v-else @click="selectTable(_item, _index)"><Remove /></el-icon>
                                                <el-input v-model="_item.name" @input="changeTableSize(_item, _index)"></el-input>
                                            </div>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form-item>
        </div>
        <div class="table" v-if="formData.spec_type == 2 && showTable">
            <div class="table-div">
                <div class="table-div-item flex flex-row gap-2 justify-center" v-for="(item, index) in new Array(columnList.length + groupList.length).fill(0)" :key="index">
                    <template v-if="index <= groupList.length - 1">
                        <!--                        {{testDatas}}-->
                        {{testDatas[0][index].group}}
                    </template>
                    <template v-else>
                        {{columnList[index - groupList.length].label}}
                        <popover-inhandleEditput
                                v-if="index != columnList.length + groupList.length - 1"
                                class="ml-[10px]"
                                @confirm="handleEdit($event, columnList[index - groupList.length].prop)"
                        >
                            <el-button type="primary" link v-perms="['user:edit']">
                                <icon name="el-icon-EditPen" />
                            </el-button>
                        </popover-inhandleEditput>
                    </template>
                </div>
            </div>
            <div class="table-body" v-for="(item, index) in testDatas" :key="index">
                <div class="table-body-item" v-for="(_item, _index) in new Array(columnList.length + groupList.length).fill(0)" :key="index + _index">
                    <template v-if="_index <= groupList.length - 1">
                        {{testDatas[index][_index].name}}
                    </template>
                    <template v-else>
                        <span v-if="columnList[_index - groupList.length].prop === 'status'">
                            <el-switch v-model="testDatas[index][0][columnList[_index - groupList.length].prop]" :active-value="1" :inactive-value="0"/>
                        </span>
                        <span v-else>
                              {{testDatas[index][0][columnList[_index - groupList.length].prop]}}
                        </span>
                        <popover-input
                                v-if="columnList[_index - groupList.length].change"
                                class="ml-[10px]"
                                @confirm="tableEdit($event, testDatas[index][0], columnList[_index - groupList.length].prop)"
                        >
                            <el-button type="primary" link v-perms="['user:edit']">
                                <icon name="el-icon-EditPen" />
                            </el-button>
                        </popover-input>
                    </template>
                </div>
            </div>
        </div>
          <div class="table" v-if="route.query.id">
              <div class="table-div">
                  <div class="table-div-item flex flex-row gap-2 justify-center" v-for="(item, index) in new Array(columnList.length + groupList.length).fill(0)" :key="index">
                      <template v-if="index <= groupList.length - 1">
                          <!--                        {{testDatas}}-->
                          {{testDatas[0][index].group}}
                      </template>
                      <template v-else>
                          {{columnList[index - groupList.length].label}}
                          <popover-input
                                  v-if="index != columnList.length + groupList.length - 1"
                                  class="ml-[10px]"
                                  @confirm="handleEdit($event, columnList[index - groupList.length].prop)"
                          >
                              <el-button type="primary" link v-perms="['user:edit']">
                                  <icon name="el-icon-EditPen" />
                              </el-button>
                          </popover-input>
                      </template>
                  </div>
              </div>
              <div class="table-body" v-for="(item, index) in testDatas" :key="index">
                  <div class="table-body-item" v-for="(_item, _index) in new Array(columnList.length + groupList.length).fill(0)" :key="index + _index">
                      <template v-if="_index <= groupList.length - 1">
                          {{testDatas[index][_index].name}}
                      </template>
                      <template v-else>
                        <span v-if="columnList[_index - groupList.length].prop === 'status'">
                            <el-switch v-model="testDatas[index][0][columnList[_index - groupList.length].prop]" :active-value="1" :inactive-value="0"/>
                        </span>
                          <span v-else>
                              {{testDatas[index][0][columnList[_index - groupList.length].prop]}}
                        </span>
                          <popover-input
                                  v-if="columnList[_index - groupList.length].change"
                                  class="ml-[10px]"
                                  @confirm="tableEdit($event, testDatas[index][0], columnList[_index - groupList.length].prop)"
                          >
                              <el-button type="primary" link v-perms="['user:edit']">
                                  <icon name="el-icon-EditPen" />
                              </el-button>
                          </popover-input>
                      </template>
                  </div>
              </div>
          </div>
        <div>
          <el-form-item label="商品简介描述" prop="remark">
              <div class="w-80">
                  <el-input
                          type="textarea"
                          :autosize="{ minRows: 6, maxRows: 6 }"
                          v-model="formData.remark"
                          maxlength="200"
                          show-word-limit
                          clearable
                          placeholder="请输入商品简介描述"
                  />
              </div>
          </el-form-item>
        </div>
        <div>
            <el-form-item label="商品富文本详情" prop="content">
                <editor v-model="formData.content" :height="400" :width="'100%'" />
            </el-form-item>
        </div>
      </el-form>
      <footer-btns v-perms="['goods.goods/edit', 'goods.goods/add']">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </footer-btns>
    </el-card>
  </div>
</template>
<script lang="ts" setup>

import { useDictOptions } from "@/hooks/useDictOptions";
import type { CheckboxValueType, ElTree, FormInstance } from "element-plus";
import { shopCatListTree, generateGoodsSkuCode, Gooddetail, Goodsedit,
    goodAdd } from '@/api/goods'
const coverRef = ref(null)  // 封面
const imgRef = ref(null) // 轮播
import useAppStore from "@/stores/modules/app";
import {getCouponList} from "@/api/consumer";
import { UserRankList } from '@/api/user'
import { goodRule } from './data.ts'
import {usePaging} from "@/hooks/usePaging";
const route = useRoute();
const router = useRouter();
const formData = reactive({
    second_cat_id: "",
    name: "",
    gift_coupon_count: 0,
    gift_coupon: '',
    cover: "",
    slider: [],
    stock_total: 0, // 库存
    price_market: 0,
    price_selling: 0,
    vip_reward_balance2: 0,
    vip_reward_balance2_balance3: 0,
    vip_reward_balance2_inv_rate: 0,
    limit_max_num: 0,
    stock_virtual: 0,
    is_recommend: 1,
    spec_type: 2,
    overlay_coupon: 1,
    daili_viewable_radio: 1,
    coupon_price_max: 0,
    send_type: 1,
    remark: "",
    viewable: "",
    unviewable: "",
    data_specs: [],
    data_items: [],
	is_coupon:1,
    is_commission:1, // 是否分佣
});

// 获取收益等级
const { pager, getLists } = usePaging({
    fetchFun: UserRankList
})



// 获取分类数据
const { optionsData: classifyList } = useDictOptions<{
    lists: any[]
}>({
    lists: {
        api: shopCatListTree
    }
});



// 优惠卷
let { optionsData: couponList } = useDictOptions<{
    lists: any[]
}>({
    lists: {
        api: getCouponList
    }
});


// 渲染表格  data_specs
const groupList = ref([
    {
        name: "默认分组",
        list: [
            {
                name: "默认规格",
                check: true,
                show: true,
                group: "默认分组"
            },
        ]
    }
]);

// 表项（头）
const columnList =  ref([
    { prop: "sku", label: '商品SKU', change: true},
    { prop: "balance", label: '成本价格', change: true},
    { prop: "market", label: '市场价格', change: true},
    { prop: "selling", label: '销售价格', change: true},
    { prop: "virtual", label: '虚拟销量'},
    { prop: "stock_total", label: '库存'},
    { prop: "status", label: '销售状态'}
]);

// 表格数据  data_items
const testDatas:any = ref([
    [
        {
            "name0": "默认规格",
            "check": true,
            "show": true,
            "group": "默认分组",
            "key": "默认分组:默认规格",
            "sku": "",
            "status": true,
            "market": "0.00",
            "balance": "0.00",
            "selling": "0.00",
            "integral": "0",
            "stock_total": "1",
            "virtual": "0"
        }
    ],
]);


// 渲染表格
const showTable = ref(false);

if (!route.query.id) {
    watch(groupList, (newValue, oldValue) => {
        // const itemDome = testDatas.value[0];
        showTable.value = false;
        const group1 = newValue[0];
        const group2 = newValue[1];
        const group3 = newValue[2];
        testDatas.value = [];
        if (group3) {
            for (let i = 0; i < group1.list.length; i++) {
                for (let j = 0; j < group2.list.length; j++) {
                    for (let k = 0; k < group3.list.length; k++) {
                        if (group1.list[i].check && group2.list[j].check && group3.list[k].check) {
                            testDatas.value.push(
                                [
                                    {
                                        // "name0": group1.list[i].name,
                                        // "name1": group2.list[j].name,
                                        "name": group1.list[i].name,
                                        "group": group1.name,
                                        "key": `${group1.name}:${group1.list[i].name};${group2.name}:${group2.list[j].name};${group3.name}:${group3.list[k].name}`,
                                        "check": true,
                                        "show": true,
                                        "sku": "",
                                        "status": 1,
                                        "market": "0.00",
                                        "balance": "0.00",
                                        "selling": "0.00",
                                        "integral": "0",
                                        "stock_total": "1",
                                        "virtual": "0"
                                    },
                                    {
                                        name: group2.list[j].name,
                                        check: group2.list[j].check,
                                        show: group2.list[j].show,
                                        group: group2.list[j].group
                                    },
                                    {
                                        name: group3.list[k].name,
                                        check: group3.list[k].check,
                                        show: group3.list[k].show,
                                        group: group3.list[k].group
                                    }
                                ]
                            );
                        }
                    }
                }
            }
        } else if(group2 && !group3) {
            for (let i = 0; i < group1.list.length; i++) {
                for (let j = 0; j < group2.list.length; j++) {
                    if (group1.list[i].check && group2.list[j].check) {
                        testDatas.value.push(
                            [
                                {
                                    // "name0": group1.list[i].name,
                                    // "name1": group2.list[j].name,
                                    "name": group1.list[i].name,
                                    "group": group1.name,
                                    "key": `${group1.name}:${group1.list[i].name};${group2.name}:${group2.list[j].name}`,
                                    "check": true,
                                    "show": true,
                                    "sku": "",
                                    "status": 1,
                                    "market": "0.00",
                                    "balance": "0.00",
                                    "selling": "0.00",
                                    "integral": "0",
                                    "stock_total": "1",
                                    "virtual": "0"
                                },
                                {
                                    name: group2.list[j].name,
                                    check: group2.list[j].check,
                                    show: group2.list[j].show,
                                    group: group2.list[j].group
                                },
                            ]
                        );
                    }
                }
            }
        } else {
            for (let i = 0; i < group1.list.length; i++) {
                if (group1.list[i].check) {
                    testDatas.value.push(
                        [
                            {
                                "name": group1.list[i].name,
                                "group": group1.name,
                                "key": `${group1.name}:${group1.list[i].name}`,
                                "check": true,
                                "show": true,
                                "sku": "",
                                "status": 1,
                                "market": "0.00",
                                "balance": "0.00",
                                "selling": "0.00",
                                "integral": "0",
                                "stock_total": "0",
                                "virtual": "0"
                            },
                        ]
                    );
                }
            }
        }
        generateGoodsSkuCode({generate_goods_sku_num: testDatas.value.length}).then(res => {
            res.list.forEach((res: string, index: number) => {
                testDatas.value[index][0].sku = res
            });
            showTable.value = true;
        })
    }, { deep: true, immediate: true });
}

// 编辑表头
const changeTableSize = async (item:any, _index: number) => {
    testDatas.value[_index][0].name = item.name;
};

// 编辑表格中每一项
const tableEdit = (val:string, item:object, key:string) => {
    item[key] =  val
}


// 添加分组
const addTableList = () => {
    let tabModel = {
        name: `规格分组${groupList.value.length+1}`,
        list: [
            {
                name: "规格属性",
                check: true,
                show: true,
                group: `规格分组${groupList.value.length+1}`,
            },
        ]
    };
    groupList.value.push(tabModel);
    // columnList.value.splice(groupList.value.length - 1, 0, { prop: `name${groupList.value.length - 1}`, label: `规格分组${groupList.value.length}`});
};


// 添加规格
const addTableItemList = (index: number,  name: string) => {
    const length = groupList.value[index].list.length;
    const obj = {
        name: `默认规格${length}`,
        check: true,
        show: true,
        group: name
    };
    groupList.value[index].list.push(obj);
};


// 更改分组名
const changeTableTitle = async (index: number, name: string) => {
    groupList.value[index].list.forEach(res => {
        res.group = name
    });
    // columnList.value[index].label = name
};


// 删除分组
const delTableList = (index: number) => {
    groupList.value.splice(index, 1);
    columnList.value.splice(index, 1);
};

// 左移
const LeftMove = (index: number, item: any) => {
    // const copyColumnList = JSON.parse(JSON.stringify(columnList.value));
    // const old_dom = copyColumnList[index]
    // const new_dom = copyColumnList[index - 1]
    // copyColumnList.splice(index - 1, 1)
    // copyColumnList.splice(index - 1, 0, old_dom)
    // copyColumnList.splice(index, 1)
    // copyColumnList.splice(index, 0, new_dom)
    // columnList.value = copyColumnList
    // // columnList.value.splice(index, 0, newDom_new)
    // const copyGroupList = JSON.parse(JSON.stringify(groupList.value));
    // const newDom = copyGroupList[index - 1]
    // copyGroupList.splice(index - 1, 1)
    // copyGroupList.splice(index - 1, 0, item)
    // copyGroupList.splice(index, 1)
    // copyGroupList.splice(index, 0, newDom)
    // groupList.value = copyGroupList
};

// 编辑表格头部
const handleEdit = (val:string, key:string) => {
    testDatas.value.forEach((res: any) => {
        res[0][key] = val
    })
};


// 选中规格
const selectTable = (item: any, _index: number) => {
    if (testDatas.value.length !== 1) {
        item.check = !item.check;
    }
};
// 选择规格
// const selectTable = (item: any, _index: number) => {
//     item.check = !item.check;
// };


// 照片更新
const actionImg = async (type: string) => {
    console.log(type)
    if (type === 'cover') {
        formData.cover = coverRef.value.fileList[0].response.data.url;
    }
    if (type === 'slider') {
        formData.slider.push(imgRef.value.fileList[0].response.data.url)
    }
};


//保存
const formRef = shallowRef<FormInstance>();
const handleSubmit = async () => {
    await formRef.value?.validate();
    let copyFormData = JSON.parse(JSON.stringify(formData));
    copyFormData.data_specs = JSON.stringify(groupList.value);
    copyFormData.data_items = JSON.stringify(testDatas.value);
    copyFormData.slider = copyFormData.slider.length ? copyFormData.slider.join('|') : String(copyFormData.slider);
    console.log(copyFormData)
    if (route.query.id) {
        copyFormData.id= route.query.id;
        await Goodsedit(copyFormData);
        router.back();
    } else {
        await goodAdd(copyFormData);
        router.back();
    }
};

const handleClick = async (e: number) => {
   if(e==2){
	   formData.gift_coupon_count = 0
	   formData.gift_coupon = ''
   }
};

// 编辑
if (route.query.id) {
    Gooddetail({id: route.query.id}).then(res => {
        Object.keys(formData).forEach(key => {
            if (res.hasOwnProperty(key)) {
                if (['second_cat_id', 'price_market', 'price_selling','vip_reward_balance2','vip_reward_balance2_balance3','vip_reward_balance2_inv_rate'].includes(key)) {res[key] = Number(res[key])}
                if (key === 'slider') {res[key] = res[key].split('|')}
                formData[key] = res[key];
                if (res.viewable != '') {
                    formData.daili_viewable_radio = 2
                }
                if (res.unviewable != '') {
                    formData.daili_viewable_radio = 3
                }
            }
        });
        groupList.value = formData.data_specs || groupList.value
        testDatas.value = formData.data_items || testDatas.value
        // groupList.value.forEach((_res, index) => {
        //     columnList.value.splice( index, 0, { prop: `name${index}`, label: _res.name});  // 增加列
        // });
    })
} else {
    // groupList.value.forEach((_res, index) => {
    //     columnList.value.unshift( { prop: `name${index}`, label: _res.name});  // 增加列
    // });
    getLists().then(res => {
        formData.vip_reward_balance2_balance3 = res.list.find(_res => _res.name == '代理').rate;
        formData.vip_reward_balance2_inv_rate = res.list.find(_res => _res.name == '团长').rate
    })
}
</script>
<style lang="scss" scope>
.preview {
  width: 375px;
  box-sizing: border-box;
  flex: none;
  height: 722px;
  border: 1px solid hsla(0, 0%, 89.8%, 0.898039);
  display: flex;
  flex-direction: column;
}
.title {
  background: #f5f8ff;
  height: 40px;
  border-bottom: 1px solid hsla(0, 0%, 89.8%, 0.898039);
}
.text-nowrap {
  word-break: break-all;
}
.tableList-check-div {
    border: 1px #B6B6B6 solid;
    box-sizing: border-box;
    padding: 5px;
    cursor: pointer;
}
    .table {
        /*border: 1px red solid;*/
        width: 98%;
        margin: 20px;
        box-sizing: border-box;
        border: 1px solid #B6B6B6;
        border-top: none;
        border-left: none;
        .table-div {
            /*border: 1px red solid;*/
            display: flex;
            flex-direction: row;
            .table-div-item {
                /*border: 1px red solid;*/
                /*flex: 1;*/
                width: calc(100%/8);
                text-align: center;
                /*background-color: #f5f7fa;*/
                border: 1px solid #B6B6B6;
                border-right: none;
                border-bottom: none;
                box-sizing: border-box;
                background-color: #f5f7fa;
                padding: 10px;
            }
        }
        .table-body {
            display: flex;
            flex-direction: row;
            .table-body-item {
                width: calc(100%/8);
                overflow-x: auto;
                text-align: center;
                /*background-color: #f5f7fa;*/
                border: 1px solid #B6B6B6;
                border-right: none;
                border-bottom: none;
                box-sizing: border-box;
                padding: 10px;
            }
        }
    }
</style>
